<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Funk - 官网</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #87CEEB, #FFB6C1);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            position: relative;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.2) 0%, transparent 50%),
                        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.2) 0%, transparent 50%);
            z-index: -1;
        }

        /* 雪花样式 */
        .snowflakes {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999; /* 确保在最上层 */
        }

        .snowflake {
            position: absolute;
            top: -10px;
            color: #fff;
            font-size: 1em;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
            user-select: none;
            opacity: 0.8;
            animation: fall linear forwards;
        }

        @keyframes fall {
            to {
                transform: translateY(105vh) rotate(360deg);
            }
        }

        /* 星链样式 */
        .starlink-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1; /* 在雪花下方 */
            overflow: hidden;
        }

        .star-trail {
            position: absolute;
            width: 180px; /* 星链长度 */
            height: 2.5px; /* 星链厚度 */
            background: linear-gradient(90deg, 
                rgba(255, 255, 255, 0) 0%, 
                rgba(255, 255, 255, 0.8) 50%, 
                rgba(255, 255, 255, 0) 100%);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            transform-origin: left center;
            animation: trailMove linear forwards;
        }

        .star {
            position: absolute;
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 0 8px white;
            animation: starTwinkle 2s infinite alternate;
        }

        @keyframes trailMove {
            to {
                transform: translateX(100vw) rotate(0deg);
            }
        }

        @keyframes starTwinkle {
            0% { opacity: 0.3; }
            100% { opacity: 1; }
        }

        .container {
            width: 100%;
            max-width: 1000px;
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            position: relative;
            z-index: 1;
        }

        .header {
            padding: 40px;
            text-align: center;
            background: rgba(255, 255, 255, 0.15);
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }

        .profile-name {
            font-size: 2.8rem;
            color: #fff;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            margin-bottom: 15px;
            font-weight: 600;
        }

        .profile-tagline {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.9);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .content {
            display: flex;
            padding: 30px;
        }

        .main-content {
            flex: 1;
            padding: 20px;
        }

        .section {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .section-title {
            font-size: 1.5rem;
            color: #fff;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }

        .about-text {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.7;
            font-size: 1.1rem;
        }

        .music-player {
            width: 100%;
            height: 86px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            overflow: hidden;
            margin-top: 20px;
        }

        .sidebar {
            width: 300px;
            padding: 20px;
        }

        .avatar-container {
            text-align: center;
            margin-bottom: 25px;
        }

        .avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 5px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
        }

        .avatar:hover {
            transform: scale(1.05);
        }

        .menu-button {
            display: block;
            width: 100%;
            padding: 15px;
            margin: 10px 0;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 10px;
            color: white;
            font-size: 1.1rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            z-index: 10;
            position: relative;
        }

        .menu-button:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
        }

        .sub-menu {
            display: none;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            padding: 15px;
            margin-top: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 100;
        }

        .sub-menu.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        .sub-menu a {
            display: block;
            padding: 12px;
            margin: 8px 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: white;
            text-decoration: none;
            transition: all 0.2s ease;
            text-align: center;
        }

        .sub-menu a:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateX(5px);
        }

        .footer {
            text-align: center;
            padding: 20px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                order: -1;
                margin-bottom: 30px;
            }
            
            .header {
                padding: 30px 20px;
            }
            
            .profile-name {
                font-size: 2.2rem;
            }
        }
    </style>
</head>
<body>
    <!-- 星链容器 -->
    <div class="starlink-container" id="starlink-container"></div>
    
    <!-- 雪花容器 -->
    <div class="snowflakes" id="snowflakes"></div>
    
    <div class="container">
        <div class="header">
            <h1 class="profile-name">FunkBox</h1>
            <p class="profile-tagline">欢迎使用Funk项目</p>
        </div>
        
        <div class="content">
            <div class="main-content">
                <!-- 音乐欣赏部分移到关于我部分上方 -->
                <div class="section">
                    <h2 class="section-title">音乐播放</h2>
                    <p style="color: rgba(255,255,255,0.9); margin-bottom: 15px;">正在播放：Bloody Mary</p>
                    <div class="music-player">
                        <iframe 
                            frameborder="no" 
                            border="0" 
                            marginwidth="0" 
                            marginheight="0" 
                            width="100%" 
                            height="86" 
                            src="https://music.163.com/outchain/player?type=2&id=2647164594&auto=0&height=66">
                        </iframe>
                    </div>
                </div>
                
                <div class="section">
                    <h2 class="section-title">关于Funk</h2>
                    <p class="about-text">
                        Funk项目由Spring于2025年初创建，我们立志要为各位用户带来更好的体验。
                        
                        Spring承诺除了FunkAS，其他Funk产品一律公益！
                    </p>
                </div>
            </div>
            <div class="sidebar">
                <div class="avatar-container">
                
         
                    <img src="http://glowguide.space/img/68ea9896bb91f.png" alt="个人头像" class="avatar">
                </div>
            <div class="sidebar">
                <div class="avatar-container">
                    
                </div>
                
                <button class="menu-button" onclick="toggleMenu('quick-links')">快速链接</button>
                <div id="quick-links" class="sub-menu">
                    <a href="https://www.123684.com/s/RMLQjv-R3K53" target="_blank">官方网盘</a>
                    <a href="https://shop.682fk.com/shop/6ROOTNK" target="_blank">官方卡网</a>
                    <a href="http://t.me/KNROOT6" target="_blank">官方频道</a>
                </div>
                
                <button class="menu-button" onclick="toggleMenu('projects')">项目列表</button>
                <div id="projects" class="sub-menu">
                    <a href="http://19zao.com" target="_blank">FunkBox</a>
                    <a href="http://19zao.com" target="_blank">FunkAS</a>
                    <a href="http://19zao.com" target="_blank">FunkModules</a>
                </div>
                
                <button class="menu-button" onclick="toggleMenu('social')">联系作者</button>
                <div id="social" class="sub-menu">
                    <a href="https://qm.qq.com/q/Xkro533sgU" target="_blank">QQ</a>
                    <a href="http://www.coolapk.com/u/33881454" target="_blank">酷安</a>
                    <a href="http://t.me/CQ_Nanc" target="_blank">TG</a>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>© 2025  | Technology is no longer</p>
        </div>
    </div>

    <script>
        function toggleMenu(menuId) {
            const menu = document.getElementById(menuId);
            const allMenus = document.querySelectorAll('.sub-menu');
            
            allMenus.forEach(m => {
                if (m.id !== menuId) {
                    m.classList.remove('active');
                }
            });
            
            menu.classList.toggle('active');
        }
        
        // 点击页面其他区域关闭菜单
        document.addEventListener('click', function(event) {
            const menus = document.querySelectorAll('.sub-menu');
            const buttons = document.querySelectorAll('.menu-button');
            
            let isMenuClicked = false;
            buttons.forEach(button => {
                if (button.contains(event.target)) {
                    isMenuClicked = true;
                }
            });
            
            if (!isMenuClicked) {
                menus.forEach(menu => {
                    if (!menu.contains(event.target)) {
                        menu.classList.remove('active');
                    }
                });
            }
        });

        // 雪花效果代码
        function createSnowflake() {
            const snowflake = document.createElement('div');
            snowflake.classList.add('snowflake');
            snowflake.innerHTML = '❄';
            
            // 随机大小
            const size = Math.random() * 1.5 + 0.5;
            snowflake.style.fontSize = size + 'em';
            
            // 随机起始位置
            snowflake.style.left = Math.random() * 100 + 'vw';
            
            // 随机动画时长
            const animationDuration = Math.random() * 5 + 5;
            snowflake.style.animationDuration = animationDuration + 's';
            
            // 随机不透明度
            snowflake.style.opacity = Math.random() * 0.5 + 0.3;
            
            // 随机旋转角度
            const rotation = Math.random() * 360;
            snowflake.style.transform = `rotate(${rotation}deg)`;
            
            document.getElementById('snowflakes').appendChild(snowflake);
            
            // 雪花落下后移除
            setTimeout(() => {
                snowflake.remove();
            }, animationDuration * 1000);
        }
        
        // 创建雪花
        function startSnow() {
            // 初始创建一些雪花
            for (let i = 0; i < 30; i++) {
                setTimeout(() => createSnowflake(), Math.random() * 5000);
            }
            
            // 持续创建雪花
            setInterval(createSnowflake, 150);
        }
        
        // 星链效果代码
        function createStarTrail() {
            const trail = document.createElement('div');
            trail.classList.add('star-trail');
            
            // 随机起始位置
            const startY = Math.random() * 100;
            trail.style.top = startY + 'vh';
            trail.style.left = '-150px'; // 从屏幕左侧外开始
            
            // 随机角度
            const angle = Math.random() * 30 - 15; // -15到15度
            trail.style.transform = `rotate(${angle}deg)`;
            
            // 随机动画时长
            const duration = Math.random() * 5 + 3; // 3-8秒
            trail.style.animationDuration = duration + 's';
            
            // 创建星星
            const starCount = 5;
            for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.classList.add('star');
                
                // 星星在星链上的位置
                const position = (i / starCount) * 100;
                star.style.left = position + '%';
                
                // 随机大小
                const size = Math.random() * 3 + 2;
                star.style.width = size + 'px';
                star.style.height = size + 'px';
                
                trail.appendChild(star);
            }
            
            document.getElementById('starlink-container').appendChild(trail);
            
            // 星链移动完成后移除
            setTimeout(() => {
                trail.remove();
            }, duration * 1000);
        }
        
        // 开始星链效果
        function startStarlink() {
            // 初始创建一些星链
            for (let i = 0; i < 5; i++) {
                setTimeout(() => createStarTrail(), Math.random() * 3000);
            }
            
            // 持续创建星链
            setInterval(createStarTrail, 1000);
        }
        
        // 页面加载完成后开始效果
        window.addEventListener('load', function() {
            startSnow();
            startStarlink();
        });
    </script>
</body>
</html>